import React, { Component }from 'react';
import { connect } from 'react-redux';
import { getNoticeList } from 'action/notice.js';
import 'css/noticeList.less';
 
class NoticeList extends Component{
    constructor(props) {
        super(props);
        
        this.state = {
            active: 'hasNo'
        }
        this.getNoticeList();
    }  
    changeActive(status,tabName){
           let active = status;
           this.setState(Object.assign({},this.state,{
               active: active
           }))
          this.getNoticeList(status);
       }
    getNoticeList(){
        let data = {
            pageNumber: this.props.notice.noticeList.pageNo,
            pageSize: 10,
            status: this.state.active == 'hasNo'?1:2
        }
        this.props.getNoticeList(data);
    }
    render(){
        let noticeList = this.props.notice ? this.props.notice.noticeList.list.map((item) => {
            return (
                <div className="noticeText" key={item.id}>
                    <p className="text">{item.content}</p>
                    <p className="user-mess">
                        <span className="user">创建人：{item.createBy}</span>
                        <span className="time">创建时间：{item.ctime}</span>
                    </p>
                </div>
            );
        }): <div className="list-mess">暂时无数据</div>
        return(
            <div className="content">
                <ul className="subNavWrap">
                    <li key='allOrder' onClick={()=>{this.changeActive(1,'hasNo')}} className={this.state.active == 'hasNo'?'active':''}>未读</li>
                    <li key='toReceive' onClick={()=>{this.changeActive(2,'hasDid')}} className={this.state.active == 'hasDid'?'active':''}>已读</li>
                </ul>
                <div className="noticeList">
                    {noticeList}
                </div>
                
            </div>
        );
    }
}
const noticeListData = (state) => {
    return {
        notice: state.notice
    }
}
let dispatchHandle = (dispatch, getState) => {
    return {
        getNoticeList(data){
            dispatch(getNoticeList(data)) 
        }
        
    }
    
}
let visibileNoticeList= connect(noticeListData,dispatchHandle)(NoticeList);


export default visibileNoticeList;